<template>
    <div class="descriptionContainer">
        <img src="/src/assets/img/games/farm/leftBack02.webp" alt="">
        <div class="textDescription">
            <h1>FARM WITH FRIENDS AND FAMILY</h1>
            <p>You don't have to be from a farm to be a great farmer. Hay Day lets you get back to nature and experience
                the simple life of working the land. It's a special game set in a real special place. Food grows free,
                people smile and the animals are always happy to see you. It never rains here, but the crops never die.
                And if you're craving a little bacon, one of the pigs will be happy to fry some up for you. After all,
                what are pigs... oops, we mean neighbors for?</p>
            <div class="app-downloads">
                <a href="https://itunes.apple.com/app/hay-day/id506627515?mt=8" target="_blank"
                   class="app-store-link"><img
                    src="/src/assets/img/footer/appstore.webp" alt="App Store"></a>
                <a href="https://play.google.com/store/apps/details?id=com.supercell.hayday&referrer=mat_click_id%3D2cff480805f177bb9a0b477c702bec6f-20141216-1681"
                   target="_blank"
                   class="play-store-link"><img src="/src/assets/img/footer/googlestore.webp"
                                                alt="Google Play"></a>
                <a href="https://www.amazon.com/Supercell-ltd-Hay-Day/dp/B018GSK5ZC/"
                   target="_blank"
                   class="play-store-link"><img src="/src/assets/img/common/amazonAppstore.webp"
                                                alt="Download Hay Day on Amazon appstore"></a>
            </div>
        </div>
    </div>
</template>

<script setup>

</script>

<style scoped>
.descriptionContainer {
    padding: 50px 0;
    display: flex;
}

.descriptionContainer img {
    width: 58%;
    margin-left: -16%;
}

.descriptionContainer .textDescription {
    width: 40%;
    margin: auto;
}

.textDescription h1 {
    font-size: 34px;
    font-weight: bold;
    margin: 23px 0;
}

.textDescription p {
    font-size: 18px;
    line-height: 1.5;
}

.app-downloads {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 23px;
}

.app-downloads a {
    margin-right: 20px;
}

.app-store-link img, .play-store-link img {
    height: 50px;
    width: auto;
    margin: 0;
    padding: 0;
}
</style>